<template>
  <SwipePagination v-model="page">
    <PopularCreators @creator="onCreator"></PopularCreators>
    <template #page-2>
      <Viewer :router="viewerRouter" @back="page = 1"></Viewer>
    </template>
  </SwipePagination>
</template>
<script setup>
import { defineAsyncComponent, ref, watch } from 'vue'
import Viewer from '@/components/viewer/Viewer.vue'
import { useDesktopViewerRouter } from '@/compositions/viewer/router/desktopViewerRouter'
import PopularCreators from './PopularCreators.vue'

const SwipePagination = defineAsyncComponent(() => import('@/components/swipe/SwipePagination.vue'))

const page = ref(1)

const viewerRouter = useDesktopViewerRouter('desktop-popular-creators')
const { active, revertPath } = viewerRouter

function onCreator(aff, username) {
  viewerRouter.setFromCreator(aff, username)
  page.value = 2
}

watch(page, (v) => {
  if (v === 1) {
    active.value = false
    revertPath()
  } else {
    active.value = true
  }
})
</script>
